<template>
    <view class="bg-[#FCFCFE]">
        <!-- header -->
        <v-header />
        <!-- list -->
        <view class="max-w-[1297px] mx-auto">
            <view class="min-h-[850px] mt-[15px] max-md:px-[5px]">
                <view class="h-[60px] flex items-center">
                    <view class="font-bold text-3xl min-w-[40px]">{{ $t("common.head.text1") }}</view>
                </view>
                <view class="max-md:hidden">
                    <up-divider :hairline="true" />
                </view>
                <view class="text-sm text-[#6C757d] max-md:hidden">
                    <text class="font-bold">Sponsored: Crudo Protocol</text>
                    <text>: Presale Stage 2 Live at $0.009, Listing soon at $0.20.</text>
                    <text class="text-[rgb(64,138,222)] font-bold cursor-pointer"> Join Presale Now!</text>
                </view>
                <view class="mt-[30px] max-md:mt-0">
                    <uni-group mode="card">
                        <view class="flex items-center gap-[5px] mt-[5px]">
                            <text class="fa fa-industry" />
                            <text>{{ $t("account.table.tip1") }} </text>
                            <text>{{ accountsData.total }}</text>
                            <text>{{ $t("account.table.tip2") }} </text>
                        </view>
                        <view class="max-md:hidden">
                            <up-divider :hairline="true" />
                        </view>
                        <view class="mt-[20px]">
                            <uni-table :border="false" stripe :emptyText="$t('address.table.noData')">
                                <uni-tr>
                                    <uni-th align="center">{{ $t("account.table.col1") }}</uni-th>
                                    <uni-th align="center">{{ $t("account.table.col2") }}</uni-th>
                                    <uni-th align="center">{{ $t("account.table.col3") }}</uni-th>
                                    <uni-th align="center" width="100">{{ $t("account.table.col4") }}</uni-th>
                                    <uni-th align="center" width="100">{{ $t("account.table.col5") }}</uni-th>
                                    <uni-th align="center">{{ $t("account.table.col6") }}</uni-th>
                                </uni-tr>
                                <uni-tr v-for="v in accountsData.list" :key="v.id">
                                    <uni-td align="center">{{ v.id }}</uni-td>
                                    <uni-td align="center" @click="onAddress(v.address)">
                                        <view class="cursor-pointer text-[rgb(94,158,189)]">
                                            {{ v.address }}
                                        </view>
                                    </uni-td>
                                    <uni-td align="center">{{ v.balance }} HNY</uni-td>
                                    <uni-td align="center">{{ v.txn }}</uni-td>
                                    <uni-td align="center">
                                        {{ v.is_contract ? $t("account.table.yes") : $t("account.table.no") }}
                                    </uni-td>
                                    <uni-td align="center">{{ v.created_at }}</uni-td>
                                </uni-tr>
                            </uni-table>
                            <view class="flex justify-end items-center gap-[20px] pt-[20px] pb-[5px] cursor-pointer">
                                <view class="flex items-center gap-[10px]">
                                    <view class="text-[#6C757d]">{{ $t("common.page.showRows") }}</view>
                                    <view class="w-[60px]">
                                        <uni-data-select
                                            v-model="page.ps"
                                            :localdata="psData"
                                            :clear="false"
                                            placement="top"
                                            @change="onPageSizeChange"
                                        />
                                    </view>
                                </view>
                                <view>
                                    <uni-pagination
                                        :total="accountsData.total"
                                        :page-size="page.ps"
                                        :current="page.p"
                                        :showIcon="true"
                                        @change="onPageChange"
                                    />
                                </view>
                            </view>
                        </view>
                    </uni-group>
                </view>
            </view>
        </view>
        <!-- footer -->
        <v-footer />
    </view>
</template>
<script setup>
import { reactive } from "vue"
import { getAccountsList } from "@/api/common"
import { onLoad } from "@dcloudio/uni-app"
import { navigateTo } from "@/utils/tools"
import { useI18n } from "vue-i18n"

const { t } = useI18n()

const accountsData = reactive({
    list: {},
    total: 0,
    start: 0,
    end: 0
})
const page = reactive({
    p: 1,
    ps: 10
})
const psData = [
    { text: "10", value: 10 },
    { text: "25", value: 25 },
    { text: "50", value: 50 }
]

const getAccountsListFunc = async () => {
    try {
        const { list, total } = await getAccountsList(page)
        accountsData.list = list.map((v) => {
            return {
                ...v,
                created_at: v.created_at.replace("T", " ").replace("Z", "")
            }
        })
        if (page.p == 1) {
            accountsData.total = total
        }
    } catch (error) {
        console.log(error)
    }
}

const onAddress = (address) => {
    navigateTo(`address?address=${address}`)
}

const onPageSizeChange = async (e) => {
    try {
        uni.showLoading({ title: t("common.loading") })
        await getAccountsListFunc()
    } catch (error) {
        console.log(error)
    } finally {
        uni.hideLoading()
    }
}

const onPageChange = async (e) => {
    try {
        uni.showLoading({ title: t("common.loading") })
        page.p = e.current
        await getAccountsListFunc()
    } catch (error) {
        console.log(error)
    } finally {
        uni.hideLoading()
    }
}

onLoad(() => {
    getAccountsListFunc()
})
</script>
